<template>
  <view class="container">
    <!-- 选择科目 -->
    <view class="title">请选则科目</view>
    <uni-data-select v-model="grade_id" :localdata="subjeclist" @change="subjectchange"></uni-data-select>
    <!-- 选择考试类型 -->
    <view class="title">请选择考试类型</view>
    <uni-data-select v-model="exam_type_id" :localdata="typelist" @change="examtypechange"></uni-data-select>
    <!-- 请选则考试时间 -->
    <view class="title">请选择考试时间</view>
    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
      <view class="ipt" style="line-height: 90rpx">{{ date }}</view>
    </picker>
    <!-- 请填写考试名称 -->
    <view class="title">请填写考试名称</view>
    <input type="text" placeholder="例:学校月考" v-model="exam_name" placeholder-class="textcolor" class="ipt" />
    <!-- 请填写考试成绩 -->
    <view class="title">请填写考试成绩</view>
    <input type="text" placeholder="请输入考试成绩" v-model="exam_score" placeholder-class="textcolor" class="ipt" />
    <!-- TODO 还差个时间 -->

    <!-- 提交按钮 -->
    <view class="submit" @click="addgrades">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    });
    return {
      date: '',
      exam_score: '', //考试分数
      exam_name: '', //考试名称
      exam_time: '', // 考试时间
      subjeclist: [], // 考试科目列表
      grade_id: '', // 科目id
      exam_type_id: '', // 考试类型id
      typelist: []
    };
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    //成绩录入
    async addgrades() {
      const res = await uni.$http.post('/resultinput/add', {
        exam_name: this.exam_name,
        exam_time: this.exam_time,
        exam_score: this.exam_score,
        exam_type_id: this.exam_type_id,
        grade_id: this.grade_id
      });
      console.log('成绩录入', res);
      if (res.data.code == 1) {
        this.exam_name = '';
        this.exam_time = '';
        this.exam_score = '';
        this.exam_type_id = '';
        this.grade_id = '';
        this.date = '';
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
    },
    // 获取考试科目
    async getsubject() {
      const res = await uni.$http.post('/index/subjectList', {
        name: ''
      });
      // console.log('考试科目列表', res);
      this.subjeclist = res.data.data.list;
      this.subjeclist.forEach((item) => {
        item.value = item.id;
        item.text = item.name;
      });
    },
    // 获取考试类型
    async getexamtype() {
      const res = await uni.$http.post('/index/examType');
      console.log('考试类型列表', res.data.data.list);
      this.typelist = res.data.data.list;
      this.typelist.forEach((item) => {
        item.value = item.id;
        item.text = item.name;
      });
    },
    // 选择科目
    subjectchange(e) {
      console.log('科目的id', e);
      this.grade_id = e;
    },
    // 选择考试类型
    examtypechange(e) {
      console.log('类型的id', e);
      this.exam_type_id = e;
    },
    // 选择时间的变化
    bindDateChange: function (e) {
      console.log(e.detail.value);
      this.exam_time = e.detail.value;
      this.date = e.detail.value;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    }
  },
  onLoad() {
    this.getsubject();
    this.getexamtype();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 20rpx 40rpx;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
  }
  .ipt {
    box-sizing: border-box;
    width: 670rpx;
    height: 90rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    padding-left: 30rpx;
    margin: 20rpx 0 30rpx 0;
  }
  .textcolor {
    color: #999999;
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 80rpx;
    left: 40rpx;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    background: #3553e8;
    color: #fff;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  /deep/ .uni-stat__select {
    box-sizing: border-box !important;
    width: 670rpx !important;
    height: 90rpx !important;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    margin-top: 20rpx;
    margin-bottom: 30rpx;
  }
  /deep/ .uni-select {
    border: none !important;
  }
}
</style>
